import React, { useState } from 'react';
import { Settings, Plus, Edit3, Trash2, TestTube } from 'lucide-react';

interface PlatformConfig {
  id: string;
  name: string;
  loginUrl: string;
  detectionRules: {
    urlPattern?: string;
    domSelector?: string;
    apiEndpoint?: string;
  };
  isEnabled: boolean;
}

export function PlatformPage() {
  const [platforms, setPlatforms] = useState<PlatformConfig[]>([
    {
      id: '1',
      name: '抖音',
      loginUrl: 'https://www.douyin.com',
      detectionRules: {
        urlPattern: '^https://www\.douyin\.com.*',
        domSelector: '.user-info',
      },
      isEnabled: true,
    },
    {
      id: '2',
      name: '快手',
      loginUrl: 'https://www.kuaishou.com',
      detectionRules: {
        urlPattern: '^https://www\.kuaishou\.com.*',
        apiEndpoint: '/api/user/info',
      },
      isEnabled: true,
    },
  ]);

  const [selectedPlatform, setSelectedPlatform] = useState<PlatformConfig | null>(null);

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-2">
          <Settings className="text-green-500" size={24} />
          <h1 className="text-2xl font-semibold text-gray-800">平台管理</h1>
        </div>
        <button className="flex items-center space-x-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
          <Plus size={16} />
          <span>添加平台</span>
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 平台列表 */}
        <div className="bg-white rounded-lg shadow-sm border p-4">
          <h2 className="text-lg font-medium text-gray-800 mb-4">平台列表</h2>
          <div className="space-y-2">
            {platforms.map((platform) => (
              <div
                key={platform.id}
                onClick={() => setSelectedPlatform(platform)}
                className={`p-3 border rounded cursor-pointer transition-colors ${
                  selectedPlatform?.id === platform.id
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center justify-between">
                  <span className="font-medium text-gray-800">{platform.name}</span>
                  <div className={`w-3 h-3 rounded-full ${platform.isEnabled ? 'bg-green-400' : 'bg-gray-300'}`} />
                </div>
                <div className="text-sm text-gray-500 mt-1">{platform.loginUrl}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 平台配置详情 */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow-sm border p-4">
          <h2 className="text-lg font-medium text-gray-800 mb-4">
            {selectedPlatform ? `${selectedPlatform.name} 配置` : '选择平台进行配置'}
          </h2>
          
          {selectedPlatform ? (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  登录页面URL
                </label>
                <input
                  type="text"
                  value={selectedPlatform.loginUrl}
                  className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
                  readOnly
                />
              </div>

              <div>
                <h3 className="text-md font-medium text-gray-800 mb-3">登录检测规则</h3>
                
                {selectedPlatform.detectionRules.urlPattern && (
                  <div className="mb-3">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      URL匹配模式
                    </label>
                    <input
                      type="text"
                      value={selectedPlatform.detectionRules.urlPattern}
                      className="w-full px-3 py-2 border border-gray-300 rounded text-sm font-mono"
                      readOnly
                    />
                  </div>
                )}

                {selectedPlatform.detectionRules.domSelector && (
                  <div className="mb-3">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      DOM元素选择器
                    </label>
                    <input
                      type="text"
                      value={selectedPlatform.detectionRules.domSelector}
                      className="w-full px-3 py-2 border border-gray-300 rounded text-sm font-mono"
                      readOnly
                    />
                  </div>
                )}

                {selectedPlatform.detectionRules.apiEndpoint && (
                  <div className="mb-3">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      API端点
                    </label>
                    <input
                      type="text"
                      value={selectedPlatform.detectionRules.apiEndpoint}
                      className="w-full px-3 py-2 border border-gray-300 rounded text-sm font-mono"
                      readOnly
                    />
                  </div>
                )}
              </div>

              <div className="flex space-x-3">
                <button className="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                  <Edit3 size={16} />
                  <span>编辑配置</span>
                </button>
                <button className="flex items-center space-x-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600">
                  <TestTube size={16} />
                  <span>测试规则</span>
                </button>
              </div>
            </div>
          ) : (
            <div className="text-center text-gray-500 py-8">
              <Settings className="mx-auto mb-4 text-gray-300" size={48} />
              <p>请从左侧选择一个平台进行配置</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}